<template>
  <div>
    <h3>体能测评录入</h3>
    <div class="container">
      <el-form ref="form" :rules="rules" :model="form" label-width="80px" inline-message>
        <el-row :gutter="10" type="flex" justify="space-between">
          <el-col :span="6">
            <el-form-item label="录入日期" prop="createDate">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.createDate" size="small" style="width: 80%;" @change="pickerChange">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运动项目">
              <el-select v-model="form.sportId" size="small" collapse-tags @change="SportChange" filterable clearable
                placeholder="请选择">
                <el-option :label="item" :value="key" v-for="(item,key,index) in dict_sport" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="教练员">
              <el-select v-model="form.coachId" size="small" collapse-tags @change="CoachChange" filterable clearable
                placeholder="请选择">
                <el-option :label="item" :value="key" v-for="(item,key,index) in coachData" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运动员" prop="playerId">
              <el-select v-model="form.playerId" size="small" collapse-tags filterable clearable placeholder="请选择"
                @change="playerChange">
                <el-option :label="item" :value="key" v-for="(item,key,index) in playerData" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="10" type="flex">
        <el-col :span="12">
          <div v-if="inputShow">
            <el-radio-group v-model="activeName" size="small">
              <el-radio-button label="fms">动作质量</el-radio-button>
              <el-radio-button label="synthesized">综合力量</el-radio-button>
              <el-radio-button label="upper">上肢爆发力</el-radio-button>
              <el-radio-button label="partly">局部肌肉力量</el-radio-button>
              <el-radio-button label="endurance">耐力</el-radio-button>
              <el-radio-button label="balance">协调能力</el-radio-button>
              <el-radio-button label="acceleration">加速能力</el-radio-button>
              <el-radio-button label="lower">下肢爆发力</el-radio-button>
              <el-radio-button label="sensitive">灵敏性</el-radio-button>
            </el-radio-group>
            <div style="margin-top: 10px;">
              <bfViewTable :table="fms" :dict_meta="dict_meta" title="动作质量七项必填" v-show="activeName=='fms'" />
              <bfViewTable :table="synthesized" :dict_meta="dict_meta" title="综合力量三选一" v-show="activeName=='synthesized'" />
              <bfViewTable :table="upper" :dict_meta="dict_meta" title="上肢爆发力二选一" v-show="activeName=='upper'" />
              <bfViewTable :table="partly" :dict_meta="dict_meta" title="局部肌肉力量二选一" v-show="activeName=='partly'" />
              <bfViewTable :table="endurance" :dict_meta="dict_meta" title="耐力三选一" v-show="activeName=='endurance'" />
              <bfViewTable :table="balance" :dict_meta="dict_meta" title="协调能力二选一" v-show="activeName=='balance'" />
              <bfViewTable :table="acceleration" :dict_meta="dict_meta" title="加速能力二选一" v-show="activeName=='acceleration'" />
              <bfViewTable :table="lower" :dict_meta="dict_meta" title="下肢爆发力二选一" v-show="activeName=='lower'" />
              <bfViewTable :table="sensitive" :dict_meta="dict_meta" title="灵敏性三选一" v-show="activeName=='sensitive'" />
            </div>
            <div style="width: 100%;text-align: center;margin: 10px 0;">
              <el-button @click="save" type="primary" size="small">保存</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <bfViewTablePreview :previewData="previewData" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import {
    currentRolePlayer,
    sport_by_org,
    coach_by_org,
    coach_by_sport,
    pcm4player
  } from '@/api/dict.js'
  import bfViewTable from '@/components/bfViewTable/bfViewTableInput.vue'
  import bfViewTablePreview from '@/components/bfViewTable/bfViewTablePreview.vue'
  import {
    fms,
    synthesized,
    upper,
    partly,
    endurance,
    balance,
    acceleration,
    lower,
    sensitive,
    bf_meta_all,
    batchSave,
    data4preview
  } from '@/api/meta.js'
  export default {
    components: {
      bfViewTable,
      bfViewTablePreview
    },
    data() {
      return {
        form: {
          createDate: '',
          sportId: '',
          coachId: '',
          playerId: '',
        },
        dict_coach: {},
        coachData: {},
        dict_player: {},
        playerData: {},
        dict_sport: {},
        dict_meta: {},
        rules: {
          playerId: [{
            required: true,
            message: '这是必填项',
            trigger: 'change'
          }, ],
          createDate: [{
            required: true,
            message: '这是必填项',
            trigger: 'change'
          }, ],
        },
        inputShow: false,
        activeName: 'fms',
        fms: {
          tableColumn: [],
          tableData: [],
        },
        synthesized: {
          tableColumn: [],
          tableData: [],
        },
        upper: {
          tableColumn: [],
          tableData: [],
        },
        partly: {
          tableColumn: [],
          tableData: [],
        },
        endurance: {
          tableColumn: [],
          tableData: [],
        },
        balance: {
          tableColumn: [],
          tableData: [],
        },
        acceleration: {
          tableColumn: [],
          tableData: [],
        },
        lower: {
          tableColumn: [],
          tableData: [],
        },
        sensitive: {
          tableColumn: [],
          tableData: [],
        },
        previewData: {
          playerInfo: [],
          fms: [],
          synthesized: [],
          upper: [],
          partly: [],
          endurance: [],
          balance: [],
          acceleration: [],
          lower: [],
          sensitive: [],
        },
      }
    },
    created() {
      this.init_dict()
    },
    methods: {
      save() {
        let data = []
        let tableData = this[this.activeName].tableData
        tableData.forEach(item=>{
          if(item.valid){
            let obj = {
              createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD'),
              playerId: this.form.playerId
            }
            for(let key in item) {
              if(item[key] && item[key] != '-1' && key != 'seq' && key != 'valid' && key != '_XID'){
                obj[key] = item[key]
              }
            }
            data.push(obj)
          }
        })
        batchSave(data).then(res=>{
          if(res.code === 200) {
            this.$message.success('数据保存成功.')
          }else{
            this.$message.error('保存失败！')
          }
          this.data4preview()
        })
      },
      data4preview() {
        let data = {
          playerId: this.form.playerId,
          createDate: this.$moment(this.form.createDate).format('YYYY-MM-DD'),
        }
        data4preview(data).then(res=>{
          if(res.code === 200) {
            this.previewData = res.data
          }
        })
      },
      pickerChange(val){
        if(this.form.playerId){
          this.playerChange()
        }
      },
      playerChange(val) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            let data = {
              dateBegin: this.$moment(this.form.createDate).format('YYYY-MM') + '-1',
              dateEnd: this.$moment(this.form.createDate).add(1, 'months').startOf('month').format('YYYY-MM-DD'),
              playerId: val || this.form.playerId,
            }
            fms(data).then(res => {
              if (res.code === 200) {
                this.fms.tableData = res.data
                this.fms.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'leftScore',
                    title: '左得分'
                  },
                  {
                    field: 'rightScore',
                    title: '右得分'
                  },
                  {
                    field: 'normalScore',
                    title: '得分'
                  },
                  {
                    field: 'ensureScore',
                    title: '确认得分'
                  },
                ]
                this.inputShow = true
              } else {
                this.fms = {}
              }
              this.inputShow = true
            })
            synthesized(data).then(res => {
              if (res.code === 200) {
                this.synthesized.tableData = res.data
                this.synthesized.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'leftBang',
                    title: '左手(磅)'
                  },
                  {
                    field: 'leftTimes',
                    title: '左手(次)'
                  },
                  {
                    field: 'rightBang',
                    title: '右手(磅)'
                  },
                  {
                    field: 'rightTimes',
                    title: '右手(次)'
                  },
                  {
                    field: 'normalResult',
                    title: '成绩'
                  },
                ]
                this.inputShow = true
              } else {
                this.synthesized = {}
              }
            })
            upper(data).then(res => {
              if (res.code === 200) {
                this.upper.tableData = res.data
                this.upper.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'firstResult',
                    title: '第一次'
                  },
                  {
                    field: 'secondResult',
                    title: '第二次'
                  },
                  {
                    field: 'thirdResult',
                    title: '第三次'
                  },
                  {
                    field: 'normalResult',
                    title: '成绩'
                  },
                ]
                this.inputShow = true
              } else {
                this.upper = {}
              }
            })
            partly(data).then(res => {
              if (res.code === 200) {
                this.partly.tableData = res.data
                this.partly.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'normalResult',
                    title: '成绩'
                  },
                ]
                this.inputShow = true
              } else {
                this.partly = {}
              }
            })
            endurance(data).then(res => {
              if (res.code === 200) {
                this.endurance.tableData = res.data
                this.endurance.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'normalResult',
                    title: '成绩'
                  },
                ]
                this.inputShow = true
              } else {
                this.endurance = {}
              }
            })
            balance(data).then(res => {
              if (res.code === 200) {
                this.balance.tableData = res.data
                this.balance.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'normalResult',
                    title: '成绩'
                  },
                ]
                this.inputShow = true
              } else {
                this.balance = {}
              }
            })
            acceleration(data).then(res => {
              if (res.code === 200) {
                this.acceleration.tableData = res.data
                this.acceleration.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'leftFootFront',
                    title: '左脚在前'
                  },
                  {
                    field: 'rightFootFront',
                    title: '右脚在前'
                  },
                ]
                this.inputShow = true
              } else {
                this.acceleration = {}
              }
            })
            lower(data).then(res => {
              if (res.code === 200) {
                this.lower.tableData = res.data
                this.lower.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'firstResult',
                    title: '第一次'
                  },
                  {
                    field: 'secondResult',
                    title: '第二次'
                  },
                ]
                this.inputShow = true
              } else {
                this.lower = {}
              }
            })
            sensitive(data).then(res => {
              if (res.code === 200) {
                this.sensitive.tableData = res.data
                this.sensitive.tableColumn = [{
                    field: 'metaId',
                    title: '项目'
                  },
                  {
                    field: 'firstResult',
                    title: '第一次'
                  },
                  {
                    field: 'secondResult',
                    title: '第二次'
                  },
                ]
                this.inputShow = true
              } else {
                this.sensitive = {}
              }
            })
            this.data4preview()
          } else {
            return false
          }
        })
      },
      SportChange(val) {
        this.form.coachId = ''
        this.form.playerId = ''
        this.coachData = {}
        coach_by_sport({
          sportId: val
        }).then(res => {
          this.coachData = res
        })
      },
      CoachChange(val) {
        this.form.playerId = ''
        this.playerData = {}
        pcm4player({
          isImportant: 3,
          coachId: val
        }).then(res => {
          this.playerData = res
        })
      },
      init_dict() {
        return new Promise((resolve, reject) => {
          coach_by_org().then(res => {
            this.dict_coach = res
            this.coachData = res
          })
          currentRolePlayer().then(res => {
            this.dict_player = res
            this.playerData = res
          })
          bf_meta_all().then(res => {
            let dict = {}
            res.data.forEach(item => {
              dict[item.metaId] = item.name
            })
            this.dict_meta = dict
          })
          sport_by_org().then(res => {
            this.dict_sport = res
            resolve()
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 10px;
    background-color: #FFFFFF;

  }
</style>
